<template>
  <div class="all">
    <div class="LoginContainer">
      <div class="login_image"><img src="../../assets/images/u5.jpg" /></div>

      <div class="login_form">
        <h1>账号登录</h1>
        <a-form :model="formState.data">
          <a-form-item v-bind="validateInfos.username">
            <a-input
              placeholder="用户名"
              v-model:value="formState.data.username"
              @keyup.enter="onSubmit"
            >
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item v-bind="validateInfos.password">
            <a-input-password
              v-model:value="formState.data.password"
              placeholder="密码"
              @keyup.enter="onSubmit"
            >
              <template #prefix>
                <Key-outlined type="user" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <div class="btn-group">
              <a-button
                type="primary"
                @click.prevent="onSubmit"
                style="margin-right:20px;"
                :loading="loading"
                >登录</a-button
              >
              <a-button
                type="primary"
                @click="registerHandler"
                danger
                :loading="loading"
                >注册</a-button
              >
            </div>
          </a-form-item>

          <a-space>
            <a-form-item label="">
              <a-checkbox v-model:checked="formState.data.remember"
                >记住密码</a-checkbox
              >
            </a-form-item>
          </a-space>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, onMounted, ref } from 'vue'
import { UserOutlined, KeyOutlined } from '@ant-design/icons-vue'
import { Form, message } from 'ant-design-vue'
import {
  saveUserInfo,
  saveLoginFormUserInfo,
  getLoginFormUserInfo,
  clearLoginFormUserInfo,
  removeItem,
} from '@Config/server/localStorage'
import { Login } from '@Config/server/api'
import { useRoute, useRouter } from 'vue-router'
import { Messages } from '@Config/config'
import { useWin } from '@Hooks/win'
import Register from '@Page/login/register'
// message.config({
//   top: '0px',
//   duration: 211,
//   maxCount: 10000,
// });
const useForm = Form.useForm
let App = defineComponent({
  setup() {
    const container = ref()
    const router = useRouter()
    const formState = reactive({
      data: {
        username: null,
        password: null,
        remember: true,
      },
    })
    /*
    如果已登录过，则直接跳转到内部页面
    if (getUserInfo()?.token) {
      router.replace({ path: '/management/commoditymanagement' })
    }

    */
    let loading = ref(false)
    let pre = getLoginFormUserInfo()
    //如果有记录，代表已同意记住 密码功能 ，读取本地信息
    if (pre) {
      formState.data.username = pre.username
      formState.data.password = pre.password
    }

    const rulesRef = reactive({
      username: [
        {
          required: true,
          message: '请填写登录名称',
        },
      ],
      password: [
        {
          required: true,
          message: '请填写登录密码',
        },
      ],
    })
    const { validate, validateInfos, resetFields, clearValidate } = useForm(
      formState.data,
      rulesRef
    )
    const onSubmit = async () => {
      try {
        var result = await validate()
        loading.value = true

        var login_data = await Login({
          username: formState.data.username,
          pass: formState.data.password,
        })
        if (login_data.code == 0) {
          removeItem('myPath') //清空文件存储标识
          //登录成功
          Messages.add(message.success('登录成功'))
          saveUserInfo({
            ...login_data.data,
            // website: 'xmGallery',

            // powerList: [
            //   'first',
            //   'orderPrint',
            //   'printLogistics',
            //   'printSupply',
            //   'mergePrint',
            //   'second',
            //   'list',
            //   'userOrderDetail',
            //   'supplierorderlist',
            //   'comment',
            //   'supplierOrderdetail',
            //   'supplyOrderList',
            //   'supplyOrderDetail',
            //   'info',
            //   'supplierDetail',
            //   'cashOutList',
            //   'supplierManageList',
            //   'Productlist',
            //   'templateList',
            //   'templateProductList',
            //   'cashOutUser',
            //   'accountOrder',
            //   'supplierBalance',
            //   'banner',
            //   'colorManage',
            //   'Notice',
            //   'mallIcon',
            //   'concat',
            //   'transaction',
            //   'serviceAdvice',
            //   'warm',
            //   'expresslist',
            //   'expressCalc',
            //   'regionList',
            //   'roleList',
            //   'member',
            // ],
          })

          if (formState.data.remember) {
            saveLoginFormUserInfo(formState.data)
          } else {
            //不选择记住。清除信息
            clearLoginFormUserInfo()
          }
          loading.value = false
          router.replace({ path: '/sys' })

          //  console.log(router.getRoutes())
        } else {
          //登录失败
          Messages.add(message.error('登录失败' + login_data.msg))
          loading.value = false
        }
      } catch (err) {
        loading.value = false
      }
    }
    const resetForm = () => {
      resetFields()
      formState.data.username = null
      formState.data.password = null
    }
    // onMounted(() => {
    //   let width = window.screen.availWidth
    //   let height = window.screen.availHeight
    //   // container.value.style.width="100%"
    //   //container.value.style.height=height+"px"
    // })

    let [registerWin] = useWin({
      component: <Register />,
      attr: {
        title: '用户注册',
      },
    })

    let registerHandler = () => {
      registerWin({})
    }
    return {
      formState,
      onSubmit,
      validateInfos,
      resetFields,
      resetForm,
      container,
      loading,
      registerHandler,
    }
  },
  components: {
    UserOutlined,
    KeyOutlined,
  },
})
export default App
</script>
<style scoped>
.all {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  background-image: url('../../assets/images/u1.svg');
  background-repeat: repeat-x;
  background-position: 0% 50%;
}
.LoginContainer {
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  min-width: 700px;
  box-shadow: 0px 0px 15px #888888;
  background-color: #fff;
}
.login_image {
  margin-right: 20px;
  width: 397px;
}
.login_form {
  flex: 1;
}

.btn-group {
  justify-content: center;
  display: grid;
  grid-template-columns: 50% 50%;
}
.ant-input-affix-wrapper,
.ant-input-affix-wrapper:focus {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
}
button {
  border: 0;
  border-radius: 0;
}
</style>
